* {
  padding: 0;
  margin: 0;
}

html {
  height: 100%;
}

/* rgb(114,135,254)   rgb(130,88,186)

rgb(59,45,159)

rgb(95, 76, 194)

rgb(118,76,163)  rgb(92,103,211)

rgb(199, 191, 219)
rgb(237,221,22) */


body {
  background-image: url(../image/image3.jpg);
  background-size:100% 100%;
  
}

body .login-container {
  width: 18.75rem;
  height: 7.5rem;
  margin: 0 auto;
  margin-top: 20px;
  border-radius: 15px;
}

body .login-container .left-container {
  
  width: 300px;
  hight: 500px;
  margin-left: 100px;
  margin-top: 200px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  background:url(../image/box.png)
}

body .login-container .top-container1 {
  
  width: 1200px;
  hight: 500px;
  margin-left: 150px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
   background-image: linear-gradient(to bottom right,rgb(102,153,50), rgb(0,103,51));
}

body .login-container .top-container1 .title {
  color: #fff;
  font-size: 50px;
  font-weight: 200;
  text-align:center;
}

body .login-container .top-container1 .title span {
  
}

body .login-container .left-container .title {
  color: #fff;
  font-size: 40px;
  font-weight: 400;
  text-align:center;
}

body .login-container .left-container .title span {
  
}

body .login-container .left-container .input-container {
  
}

body .login-container .left-container .input-container input {
  border: 0;
  background: none;
  outline: 0;
  color: #fff;
  margin: 20px 0;
  display: block;
  width: 100%;
  padding: 0px 0;
  transition: .2s;
  border-bottom: 1px solid rgb(199, 191, 219);
}

body .login-container .left-container .input-container input:hover {
  border-bottom-color: #fff;
}

::-webkit-input-placeholder {
  color: rgb(199, 191, 219);
}

body .login-container .left-container .message-container {
  font-size: 14px;
  transition: .2s;
  color: rgb(199, 191, 219);
  cursor: pointer;
}

body .login-container .left-container .message-container:hover {
  color: #fff;
}

body .login-container .right-container {
            width:200px;
            height: 200px;
            position: absolute;
            left:20%;
            margin-top: 6rem;
            margin-left: 0px;
           
}

body .login-container .right-container .regist-container {
  text-align: center;
  color: #fff;
  font-size: 18px;
  font-weight: 200;
}

body .login-container .right-container .regist-container span {
  border-bottom: 3px solid rgb(237,221,22) ;
  display:inline-block;
  
}

body .login-container .right-container .actoin-container {
  font-size: .375rem;
  color: #fff;
  height: 100%;
  position: relative;
  text-align:center;

}

body .login-container .right-container .actoin-container span {
  border: .08rem solid rgb(148, 191, 255);
  vertical-align: middle;
  background-color: rgb(68, 131, 224);
  padding: .125rem;
  height: 0.7rem;
  width: 2.5rem;
  font-family: "微软雅黑";
  font-size: .5rem;
  font-weight: 600;
  margin-left: -0.685rem;
  display: inline;
  border-radius: .3125rem;
  position: absolute;
  bottom: 10px;
  left: calc(.7rem - .3125rem);
  transition: .2s;
  cursor: pointer;
  
 
}

body .login-container .right-container .actoin-container span:hover {
  background-color: rgb(237,221,22);
  color: rgb(95, 76, 194);
}
